<template>
  <div class="echarts-list">
    <div id="echarts-main"></div>
    <div id="echarts-main1"></div>
  </div>
</template>

<script setup>
import { onMounted } from "vue";
import { Getechartsdata, getkdata } from "../../api/echarts";
import * as echarts from "echarts";
import { useRouter } from "vue-router";

const router = useRouter();

// const myChart = ref();
let myChart = null;
let echartsdata = null;
let myChart1 = null;
let echartsdata1 = null;

function drawchart(echartsdata) {
  //   console.log(echartsdata, "echarts");
  myChart.setOption({
    title: {
      text: "echarts的简单使用",
    },
    tooltip: {
      trigger: "axis",
    },
    //工具箱设置
    toolbox: {
      feature: {
        //图形缩放功能
        dataZoom: {
          yAxisIndex: "none",
        },
        //数据窗口的功能  false能修改，true不能修改
        dataView: { readOnly: false },
        //图形类型切换功能
        magicType: { type: ["line", "bar"] },
        //重置功能
        restore: {},
        //下载图片功能
        saveAsImage: {},
      },
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      data: echartsdata.map((item) => item.x),
    },
    yAxis: { type: "value" },
    legend: { data: ["占比", "销量", "价格"] },
    series: [
      {
        name: "占比",
        type: "pie",
        data: echartsdata.map((item) => {
          return { value: item.val, name: item.x };
        }),
        radius: "30%",
        roseType: "area",
      },
      {
        name: "销量",
        type: "line",
        data: echartsdata.map((item) => item.val),
      },
      {
        name: "价格",
        type: "bar",
        data: echartsdata.map((item) => item.val / 5),
      },
    ],
  });
}

onMounted(() => {
  myChart = echarts.init(document.getElementById("echarts-main"));
  myChart1 = echarts.init(document.getElementById("echarts-main1"));
  Getechartsdata()
    .then((data) => {
      // console.log(data);
      echartsdata = data.data;
    })
    .finally(() => {
      drawchart(echartsdata);
      myChart.on("click", function () {
        router.push({ name: "pro-list" });
      });
    });
  getkdata()
    .then((data) => {
      echartsdata1 = data.data;
      console.log(data);
    })
    .finally(() => {
      myChart1.setOption({
        title: {
          text: "K线图",
        },
        tooltip: {
          trigger: "axis",
        },
        //工具箱设置
        toolbox: {
          feature: {
            //图形缩放功能
            dataZoom: {
              yAxisIndex: "none",
            },
            //数据窗口的功能  false能修改，true不能修改
            dataView: { readOnly: false },
            //图形类型切换功能
            magicType: { type: ["line", "bar", "candlestick"] },
            //重置功能
            restore: {},
            //下载图片功能
            saveAsImage: {},
          },
        },
        xAxis: {
          data: echartsdata1.x,
        },
        yAxis: {},
        legend: { data: ["数值"] },
        series: [
          {
            type: "candlestick",
            data: echartsdata1.val,
            name: "数值",
          },
        ],
      });
      myChart1.on("click", function () {
        router.push({ name: "order-list" });
      });
    });
});
</script>

<style lang="scss" scoped>
.echarts-list {
  position: relative;
  height: 100%;
  #echarts-main {
    width: 600px;
    height: 480px;
    position: absolute;
    top: 10%;
    left: 1%;
    // transform: translate(-50%, -50%);
    background: white;
  }
  #echarts-main1 {
    width: 600px;
    height: 480px;
    position: absolute;
    top: 10%;
    right: 1%;
    // transform: translate(-50%, -50%);
    background: white;
  }
}
</style>
